<template>
  <div class="port-container">
    <!-- 首页 -->
    <div class="c_upper" v-show="!showtab1">
      <!-- 画像查询 -->
      <img src="../../../assets/images/yh.png" style="height: 80px" alt="" />
      <p>用户刻画查询</p>
      <!-- 搜索组 -->
      <div class="search-input">
        <div class="btn-group">
          <div
            class="btn"
            :class="activeBtn == '设备' ? 'active' : ''"
            @click="activeBtn = '设备'"
          >
            设备
          </div>
          <div
            class="btn"
            :class="activeBtn == '人员' ? 'active' : ''"
            @click="activeBtn = '人员'"
          >
            人员
          </div>
          <div
            class="btn"
            :class="activeBtn == '应用' ? 'active' : ''"
            @click="activeBtn = '应用'"
          >
            应用
          </div>
        </div>
        <el-input v-model="input_value" placeholder="设备名称">
          <el-button slot="append" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
        </el-input>
      </div>
      <!-- 标签部分 -->
      <div class="tag-content">
        <div class="ntips">标签</div>
        <el-button
          v-for="(item, i) in btnarr1"
          :key="i"
          @click="showTrue(item.name)"
          >{{ item.name }}</el-button
        >
      </div>
      <div class="tag-content">
        <div class="ntips">历史记录</div>
        <el-button
          v-for="item in btnarr2"
          :key="item.path"
          @click="showTrue(item.name)"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <!-- 跳转目录 -->
    <div class="c_under" v-show="showtab1">
      <!-- 查询相关 -->
      <div class="search-msg">
        <el-input
          placeholder="请输入名称"
          v-model="input_value"
          class="input-with-select"
          style="width: 320px; margin-right: 25px"
        >
          <el-select v-model="activeBtn" slot="prepend" style="width: 100px">
            <el-option label="设备" value="设备"></el-option>
            <el-option label="人员" value="人员"></el-option>
            <el-option label="应用" value="应用"></el-option>
          </el-select>
        </el-input>
        <el-button size="small" type="primary" icon="el-icon-plus"
          >查询</el-button
        >
        <el-button
          size="small"
          @click="hiddenTab"
          icon="el-icon-refresh-right"
          style="margin: 0 40px 0 10px"
          >返回</el-button
        >
        <span>
          查询条件：{{ searcharr }}
          <span style="margin-right: 40px"></span>
          共查询到
          <span>{{ attrList.length }}</span>
          条结果，用时<span>{{ selectTime }}</span>
        </span>
      </div>
      <!-- 搜索列表区域 -->
      <div class="search-list">
        <el-table
          :header-cell-style="{ background: '#F3F5FC' }"
          v-loading="loading"
          :data="attrList"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="ip" label="IP地址"></el-table-column>
          <el-table-column
            prop="danwei"
            label="所属单位"
            width="300"
          ></el-table-column>
          <el-table-column prop="macAdd" label="MAC地址"></el-table-column>
          <el-table-column prop="resp" label="责任人名称"></el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text"
                ><a
                  href="http://127.0.0.1:8081/index/userBehavior/1"
                  target="_blank"
                >
                  进入画像</a
                >
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                >详细数据</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加或修改部门对话框 -->
        <attr-dia ref="attr_dia" :tableData="tableData"></attr-dia>
        <!-- 分页器 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import AttrDia from "../../../components/Dialogs/AttrDia.vue";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    AttrDia,
  },
  computed: {
  
    ...mapState({
      showtab1: state => state.portrait.showtab1,
      attrList:state=>state.portrait.attrList
    })
  },
  data() {
    return {
      activeBtn: "设备", //搜索框上面选择的值
      searcharr: "", //搜索的值
      input_value: "", //搜索框的值

      selectTime: 0, //查询结果的时间
      btnarr1: [
        {
          name: "未知设备",
          path: "shebei",
        },
        {
          name: "终端",
          path: "zhongduan",
        },
        {
          name: "服务器",
          path: "fuwuqi",
        },
        {
          name: "网络设备",
          path: "shebei",
        },
      ],
      btnarr2: [
        {
          name: "未知设备",
          path: "shebei",
        },
        {
          name: "终端",
          path: "zhongduan",
        },
        {
          name: "服务器",
          path: "fuwuqi",
        },
      ],
      total: 0,
      // 遮罩层
      loading: false,
      // 表格树数据

      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 表格的数据
      tableData: [
        {
          index: 1,
          name: "未超期",
          code: 0,
          operate: "---",
        },
        {
          index: 2,
          name: "超期",
          code: 1,
          operate: "---",
        },
        {
          index: 3,
          name: "非法占用",
          code: 0,
          operate: "---",
        },
      ],
    };
  },
  methods: {
    ...mapMutations(["portrait/changeShowtab1", "portrait/changeAttrList"]),
    // 筛选条件
    showTrue(i) {
      this.searcharr = i;
      this["portrait/changeShowtab1"](true);
      this.getList();
    },
    /** 查询部门列表 */
    getList() {
      // this.loading = true;
      let date1 = new Date();

      axios.get("test.json").then((res) => {
        if (!this.searcharr) {
          this.loading = false;
          let list = [
            {
              ip: "101.1.1.2",
              danwei: "宝兰德",
              macAdd: " 08-8E-90-86-7F-F8",
              resp: "张三",
            },
            {
              ip: "190.1.1.3",
              danwei: "宝兰德",
              macAdd: " 09-8F-93-56-7D-D8",
              resp: "李四",
            },
            {
              ip: "190.5.2.1",
              danwei: "宝兰德",
              macAdd: "12-8C-94-86-7F-F8",
              resp: "王五",
            },
            {
              ip: "101.1.1.5",
              danwei: "宝兰德",
              macAdd: "28-84-94-8C-7B-F8",
              resp: "赵六",
            },
            {
              ip: "190.1.1.10",
              danwei: "宝兰德",
              macAdd: " 08-8E-90-86-7F-F8",
              resp: "赵琦",
            },
            {
              ip: "191.5.2.1",
              danwei: "宝兰德",
              macAdd: "35-8D-93-45-7D-E8",
              resp: "李明",
            },
            {
              ip: "101.5.2.12",
              danwei: "宝兰德",
              macAdd: "25-86-9C-8D-7B-F8",
              resp: "小红",
            },
            {
              ip: "191.4.2.12",
              danwei: "宝兰德",
              macAdd: "2D-8F-94-8C-7B-F8",
              resp: "小兰",
            },
            {
              ip: "101.5.2.12",
              danwei: "宝兰德",
              macAdd: "2A-85-94-8C-7B-F8",
              resp: "钱三",
            },
               {
              ip: "191.4.2.11",
              danwei: "宝兰德",
              macAdd:"28-84-34-8C-7B-F8",
              resp: "孙二",
            },
            {
              ip: "121.3.2.11",
              danwei: "宝兰德",
              macAdd: "2B-8C-9D-8C-7B-F8",
              resp: "古四",
            },
            
          ];
           this["portrait/changeAttrList"](list);
          this.total = this.attrList.length;
          // this.attrList = res.data.data.list;
          // this.total = res.data.data.total;
        } else if (this.searcharr) {
          this.loading = false;
          // this.attrList = res.data.data.list.filter((item) => {
          //   // 保留筛选条件
          //   return []
          // });

           this["portrait/changeAttrList"]([]);
          this.total = this.attrList.length;
        }
        let date2 = new Date();
        this.selectTime = new Date(date2 - date1).getSeconds().toFixed(2);
      });
    },
    handleUpdate(i) {
      // this.$refs.attr_dia.open = true;
      this.$router.push("/Portrayal/customPortrait");
    },
    hiddenTab() {
      this.searcharr = "";
     this["portrait/changeShowtab1"](false);
    },
    search() {
     this["portrait/changeShowtab1"](true);
      this.getList();
    },
  },
  created() {},
  destroyed() {
   this["portrait/changeShowtab1"](false);
  },
};
</script>

<style lang="scss" scoped>
.port-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;

  .c_upper {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 90px;
    // 画像查询部分
    & > p {
      margin-top: 10px;
      margin-bottom: 60px;
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      line-height: 36px;
      font-size: 24px;
      font-weight: 700;
    }
  }
  // 搜索区域
  .search-input {
    width: 787px;
    .btn-group {
      position: relative;
      z-index: 2;
      .btn {
        display: inline-block;
        padding: 9px 0;
        width: 80px;
        height: 40px;
        background: #ffffff;
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        &:nth-of-type(2) {
          margin: 0 10px;
        }

        &.active {
          border-color: #4b6eef;
          color: #ffffff;
          background-color: #4b6eef;
        }
      }
    }
    .el-input {
      width: 700px;
      outline: none;
      margin-top: 10px;

      &::v-deep input {
        border-color: #c8cbcd;
        height: 48px;
      }
      &::v-deep .el-button {
        height: 48px;
        color: #fff;
        background: #4b6eef;
        border-radius: 0;
      }
    }
  }
  .tag-content {
    margin-top: 40px;
    width: 787px;
  }
  .c_under {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    // 查询条件框
    .search-msg {
      line-height: 22px;
      font-size: 14px;
      &::v-deep .el-input-group__prepend {
        background: #fff;
      }
    }
    // 搜索列表
    .search-list {
      width: 100%;
      flex: 1;
    }
  }
}
</style>
